import {defineStore} from 'pinia'
import {ref, computed} from 'vue'
import {lightTheme, darkTheme} from 'naive-ui'

export const lightName = 'light'
export const darkName = 'dark'

export const useSettingStore = defineStore('setting', () => {
    const themeMode = ref(lightName)
    const contentWidth = ref(0)
    const contentHeight = ref(0)

    const theme = computed(() => {
        return themeMode.value === darkName ? darkTheme : lightTheme
    })

    const isDark = computed(() => themeMode.value === darkName)

    function toggleTheme() {
        themeMode.value = themeMode.value === darkName ? lightName : darkName
    }

    function setTheme(mode) {
        themeMode.value = mode
    }

    function setContentWidth(width) {
        contentWidth.value = width
    }

    function setContentHeight(height) {
        contentHeight.value = height
    }

    return {
        themeMode,
        contentWidth,
        contentHeight,
        theme,
        isDark,
        toggleTheme,
        setTheme,
        setContentWidth,
        setContentHeight,
    }
})
